<template>
    <div>
        <van-nav-bar left-text="" left-arrow @click-left="router.go(-1)" />
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in list.pics" :key="image">
                <img :src="image.pics_mid" style="width: 100%;" />
            </van-swipe-item>
        </van-swipe>
        <div style="margin-top: 1.5rem; height: 6rem;background: orange; margin: 2rem;border-radius: 1rem;color: white; text-justify: center;">
            ￥{{ list.goods_price }}
        </div>
        <div v-html="list.goods_introduce"></div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
            <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
            <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
        </van-action-bar>

    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { detailApi } from '@/api/api';
import { ref } from 'vue';
let list = ref([])
let id = ref(route.query.id)

const getlist = () => {
    detailApi(id.value).then((res) => {
        console.log(res);
        list.value = res.data.message
    })
}
getlist()
</script>

<style lang="scss" scoped></style>